import 'dart:io';

import 'package:cross_file/cross_file.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class FeedbackReplenishmentController extends GetxController {
  final double navHeight = 44 + Get.mediaQuery.padding.top;
  final double navTop = 44.0;
  final RxList<XFile> files = RxList([]);
}

class FeedbckReplenishmentPage
    extends GetView<FeedbackReplenishmentController> {
  const FeedbckReplenishmentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeTop: true,
      removeLeft: true,
      removeRight: true,
      removeBottom: true,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF7f7),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(controller.navHeight),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              color: HexColor(ColorsUtils.colorF7f7),
              height: controller.navHeight,
              padding: Get.mediaQuery.padding,
              child: Stack(
                children: [
                  Positioned(
                    width: 40,
                    height: controller.navTop,
                    top: 0,
                    left: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(Get.back),
                  ),
                  Center(
                    child: Text(
                      '补充反馈',
                      softWrap: true,
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        fontWeight: FontWeight.w700,
                        color: ColorsUtils.color0000,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: insets,
                padding: const EdgeInsets.all(15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                ),
                child: ListBody(
                  children: [
                    Center(
                      child: TextField(
                        cursorHeight: 20,
                        cursorWidth: 3,
                        cursorRadius: const Radius.circular(2),
                        cursorColor: HexColor(ColorsUtils.colorFf64),
                        maxLines: 60,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000),
                        decoration: InputDecoration(
                          hintText: '请在这里输入您的宝贵意见或建议',
                          hintStyle: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999),
                          filled: true,
                          fillColor: ColorsUtils.rgba(247, 247, 247, 1),
                          contentPadding: const EdgeInsets.all(8),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                            borderSide: BorderSide.none,
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                            borderSide: BorderSide.none,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                            borderSide: BorderSide.none,
                          ),
                          constraints: const BoxConstraints.expand(
                              width: 315, height: 275),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Wrap(
                        spacing: 15,
                        runSpacing: 15,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: [
                          ...controller.files.map(
                            (file) {
                              return Obx(() {
                                return Stack(
                                  children: [
                                    Image.file(
                                      File(file.path),
                                      width: 80,
                                      height: 80,
                                      fit: BoxFit.fill,
                                    ),
                                    Positioned(
                                      width: 20,
                                      height: 20,
                                      top: 2,
                                      right: 2,
                                      child: Center(
                                        child: Icon(
                                          CupertinoIcons.xmark_circle_fill,
                                          size: 20,
                                          color:
                                              HexColor(ColorsUtils.colorFf00),
                                        ),
                                      ).onTap(() {
                                        controller.files.remove(file);
                                      }),
                                    )
                                  ],
                                );
                              });
                            },
                          ),
                          Stack(
                            children: [
                              DottedBorder(
                                padding: EdgeInsets.zero,
                                color: HexColor(ColorsUtils.colorE4e4),
                                child: Container(
                                  width: 80,
                                  height: 80,
                                  color: HexColor(ColorsUtils.colorE4e4)
                                      .withOpacity(0.5),
                                  alignment: Alignment.center,
                                  child: Icon(
                                    CupertinoIcons.camera_fill,
                                    size: 20,
                                    color: HexColor(ColorsUtils.colorCccc),
                                  ),
                                ).onTap(() async {
                                  FilePickerResult? result =
                                      await FilePicker.platform.pickFiles(
                                    type: FileType.image,
                                  );
                                  if (result != null) {
                                    for (var file in result.xFiles) {
                                      if (controller.files.length > 4) {
                                        break;
                                      }
                                      controller.files.add(file);
                                    }
                                  }
                                }),
                              ),
                              Positioned(
                                left: 0,
                                right: 0,
                                bottom: 8,
                                child: Center(
                                  child: Obx(
                                    () => Text(
                                      '图片(${controller.files.length}/4)',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color9999),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: insets,
                padding: const EdgeInsets.only(
                    left: 15, top: 10, bottom: 10, right: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                ),
                child: Row(
                  children: [
                    Container(
                      width: 80,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '联系方式',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                        ),
                      ),
                    ),
                    Expanded(
                      child: Center(
                        child: TextField(
                          cursorHeight: 20,
                          cursorWidth: 3,
                          cursorRadius: const Radius.circular(2),
                          cursorColor: HexColor(ColorsUtils.colorFf64),
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize15,
                            color: ColorsUtils.color0000,
                          ),
                          textAlign: TextAlign.left,
                          textAlignVertical: TextAlignVertical.center,
                          textDirection: TextDirection.ltr,
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            hintText: '请输入手机号码(选填)',
                            hintStyle: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color9999,
                            ),
                            filled: true,
                            fillColor: HexColor(ColorsUtils.colorF7f7),
                            isDense: true,
                            isCollapsed: true,
                            prefixIconConstraints: const BoxConstraints.expand(
                                height: 50, width: 70),
                            prefixIcon: Container(
                              alignment: Alignment.center,
                              child: Text.rich(
                                TextSpan(
                                  children: [
                                    TextSpan(
                                      text: '+86 ',
                                      style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize16,
                                        color: ColorsUtils.color0000,
                                      ),
                                    ),
                                    WidgetSpan(
                                        child: Icon(
                                          CupertinoIcons.chevron_down,
                                          color:
                                              HexColor(ColorsUtils.color9999),
                                          size: 14,
                                        ),
                                        alignment: PlaceholderAlignment.middle),
                                  ],
                                ),
                              ),
                            ).onTap(() {}),
                            contentPadding: const EdgeInsets.symmetric(
                                vertical: 15, horizontal: 10),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10),
                              borderSide: BorderSide.none,
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10),
                              borderSide: BorderSide.none,
                            ),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10),
                              borderSide: BorderSide.none,
                            ),
                            constraints: const BoxConstraints.expand(
                                width: 270, height: 50),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 20),
                alignment: Alignment.center,
                child: Container(
                  alignment: Alignment.center,
                  constraints:
                      const BoxConstraints.expand(width: 315, height: 45),
                  decoration: BoxDecoration(
                    //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(254, 70, 1, 1) 100%, rgba(254, 70, 1, 1) 100%)
                    gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                      ],
                      stops: const [0, 0, 1.0, 1.0],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      transform: GradientRotation(
                        RadianUtils.angleToRadian(90),
                      ),
                    ),
                    borderRadius: BorderRadius.circular(23),
                  ),
                  child: Text(
                    '提交',
                    style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize16,
                    ),
                  ),
                ).onTap(() {
                  // 提交表单
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }

  EdgeInsets get insets {
    return EdgeInsets.only(
        left: (Get.width - 345) / 2, right: (Get.width - 345) / 2, top: 10);
  }
}
